$(function () {
  renderPeopleLine();
  renderDateLine();
  renderPercentPie();
});

/**
 * 渲染人员分类折线图
 */
function renderPeopleLine() {
  var myChart = echarts.init(document.getElementById('peopleLine'));
  // 指定图表的配置项和数据
  var option = {
    color:['#a0ff6f'],
    grid: {
      top: 40,
      left: 40,
      right: 0
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: '{b0}: {c0} 人'
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        color: '#fff'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: ['校书记', '政工主任', '政工副主任', '院长', '院副书记', '系主任', '系副主任', '指导员', '排长', '班长', '副班长', '文员', '学员']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        interval: 0,
        color: '#fff'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    series: [{
      type: 'line',
      itemStyle: {
        opacity: 0
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2:0,
          y2:0.8,
          colorStops: [{
            offset: 0, color: 'rgba(67,200,103,1)' // 0% 处的颜色
          }, {
            offset: 0.5, color: 'rgba(67,200,103,.8)' // 50% 处的颜色
          },{
            offset: 0.8, color: 'rgba(67,200,103,.5)' // 80% 处的颜色
          },{
            offset: 1, color: 'rgba(67,200,103,.1)' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      },
      data: [820, 932, 901, 934, 1234, 345, 567, 789, 1235, 675, 435, 2341, 1456]
    }]
  };


  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染人员动向折线图
 */
function renderDateLine() {
  var myChart = echarts.init(document.getElementById('dateLine'));
  // 指定图表的配置项和数据
  var option = {
    color:['#00aefa', '#a0ff6f', '#ff6da3', '#ffc498'],
    grid: {
      top: 20,
      left: 40,
      right: 150
    },
    legend: {
      top: 0,
      right: 80,
      icon: "circle",
      orient: 'vertical',
      itemGap: 20,
      textStyle: {
        color: '#fff'
      },
      data: ['在岗', '访客', '请假', '休假']
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval: 0,
        color: '#fff'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        interval: 0,
        color: '#fff'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '在岗',
        type: 'line',
        itemStyle: {
          opacity: 0
        },
        stack: '人员动向',
        smooth: true,
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '访客',
        type: 'line',
        itemStyle: {
          opacity: 0
        },
        stack: '人员动向',
        smooth: true,
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '请假',
        type: 'line',
        itemStyle: {
          opacity: 0
        },
        stack: '人员动向',
        smooth: true,
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '休假',
        type: 'line',
        itemStyle: {
          opacity: 0
        },
        stack: '人员动向',
        smooth: true,
        data: [320, 332, 301, 334, 390, 330, 320]
      }
    ]
  };


  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

/**
 * 渲染圆环图
 */
function renderPercentPie() {
  var myChart = echarts.init(document.getElementById('percentPie'));
  // 指定图表的配置项和数据
  var option = {
    title: [
      {
        text: '在岗率',
        left: 20,
        top: '18%',
        textStyle: {
          fontWeight: 'normal',
          fontSize: '16',
          textAlign: 'center',
          color: '#fff'
        }
      },
      {
        text: '请假率',
        left: 20,
        top: '48%',
        textStyle: {
          fontWeight: 'normal',
          fontSize: '16',
          textAlign: 'center',
          color: '#fff'
        }
      },
      {
        text: '休假率',
        left: 20,
        top: '78%',
        textStyle: {
          fontWeight: 'normal',
          fontSize: '16',
          textAlign: 'center',
          color: '#fff'
        }
      }
    ],
    series: [
      {
        type: 'pie',
        clockWise: false,
        radius: [50, 55],
        hoverAnimation: false,
        silent: true,
        center: ['60%', '20%'],
        itemStyle:{
          normal:{
            labelLine: {
              show:false,
            },
          }
        },
        data: [{
          value: 14,
          itemStyle: {
            normal: {
              color: '#fff',
            }
          }
        },{
          value: 86,
          label:{
            normal:{
              show: true,
              position:"center",
              formatter: "{c}%",
              fontSize: 20,
              color: "#c16dff",
            }
          },
          itemStyle: {
            normal: {
              borderWidth:15,
              borderColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#2080fb'
              }, {
                offset: 1,
                color: '#c16dff'
              }])
            }
          }
        }]
      },
      {
        type: 'pie',
        clockWise: false,
        radius: [50, 55],
        hoverAnimation: false,
        silent: true,
        center: ['60%', '50%'],
        itemStyle:{
          normal:{
            labelLine: {
              show:false,
            },
          }
        },
        data: [{
          value: 30,
          itemStyle: {
            normal: {
              color: '#fff',
            }
          }
        },{
          value: 70,
          label:{
            normal:{
              show: true,
              position:"center",
              formatter: "{c}%",
              fontSize: 20,
              color: "#ff6d7f",
            }
          },
          itemStyle: {
            normal: {
              borderWidth:15,
              borderColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#ff6d7f'
              }, {
                offset: 1,
                color: '#ffb78f'
              }])
            }
          }
        }]
      },
      {
        type: 'pie',
        clockWise: false,
        radius: [50, 55],
        hoverAnimation: false,
        silent: true,
        center: ['60%', '80%'],
        itemStyle:{
          normal:{
            labelLine: {
              show:false,
            },
          }
        },
        data: [{
          value: 54,
          itemStyle: {
            normal: {
              color: '#fff',
            }
          }
        },{
          value: 46,
          label:{
            normal:{
              show: true,
              position:"center",
              formatter: "{c}%",
              fontSize: 20,
              color: "#00dca6",
            }
          },
          itemStyle: {
            normal: {
              borderWidth:15,
              borderColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#00dca6'
              }, {
                offset: 1,
                color: '#91e573'
              }])
            }
          }
        }]
      }
    ]
  };


  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}